import React, { useState, useEffect } from 'react';
import { useLocation, useHistory } from 'dva';
import styles from './index.less';
import { useIntl, getLocale } from 'umi';

function Index() {
  /*---------------hook变量------------------------*/
  const { pathname } = useLocation();
  const history = useHistory();
  const intl = useIntl();

  // const [isChosen, setIsChosen] = useState()

  /*-----------------hooks-------------------------*/

  /*-----------------自定义函数-------------------------*/
  function handleClick(path) {
    if (path && pathname.toLowerCase() != path) {
      history.push(path);
    }
  }

  /*------------------自定义变量-----------------------*/

  const list = [
    {
      title: intl.formatMessage({ id: 'HOME_PAGE' }),
      icon: require('../../assets/icon/home.png'),
      pathname: '/index',
      hIcon: require('../../assets/icon/hHome.png'),
    },
    {
      title: intl.formatMessage({ id: 'TRADE_MATCHING' }),
      pathname: '/exhibitor',
      icon: require('../../assets/icon/Group@2x.png'),
      hIcon: require('../../assets/icon/hGroup@2x.png'),
    },
    // {
    //   title: '直播',
    //   pathname: '/live',
    //   icon: require('../../assets/icon/live.png'),
    //   hIcon: require('../../assets/icon/hLive.png')
    // },
    // {
    //   title: '30周年庆典',
    //   pathname: '/celebration',
    //   icon: require('../../assets/icon/30.png'),
    //   hIcon: require('../../assets/icon/h30.png')
    // },
    {
      title: intl.formatMessage({ id: 'Meeting' }),
      pathname: '/meeting',
      icon: require('../../assets/icon/meeting.png'),
      hIcon: require('../../assets/icon/hMeeting.png'),
    },
    {
      title: intl.formatMessage({ id: 'Information' }),
      pathname: '/news',
      icon: require('../../assets/icon/news.png'),
      hIcon: require('../../assets/icon/hNews.png'),
    },
    {
      title: intl.formatMessage({ id: 'MY' }),
      pathname: '/my',
      icon: require('../../assets/icon/my.png'),
      hIcon: require('../../assets/icon/hMy.png'),
    },
  ];

  // console.log(pathname, 'pathname')
  const pathnameIsTabBar = list.findIndex((item) => {
    return item.pathname == pathname;
  });
  // console.log(pathnameIsTabBar, 'pathnameIsTabBar')
  return (
    <>
      {pathnameIsTabBar >= 0 && (
        <div className={styles.tabBar}>
          {list.map((item, index) => {
            const isChose = pathname.toLowerCase() == item.pathname;
            // console.log(isChose, 'isChose')
            return (
              <div
                className={styles.item}
                key={`tabbarItem${index}`}
                onClick={() => {
                  handleClick(item.pathname);
                }}
              >
                <div className={styles.iconBox}>
                  {isChose ? (
                    <img className={styles.hIcon} src={item.hIcon}></img>
                  ) : (
                    <img className={styles.icon} src={item.icon}></img>
                  )}
                </div>
                <span>{item.title}</span>
              </div>
            );
          })}
        </div>
      )}
    </>
  );
}

export default Index;
